<template>
  <div class="warn-group">
    <div v-for="(warnLine ,index) in props.column" :key="warnLine.index" class="warn-line">
      <div v-if="warnLine.type === 'line'" class="gapLine"></div>
      <div v-else-if="warnLine.type === 'info'" class="info">
        上次更新时间:{{ carData[warnLine.key] || '---'}}
      </div>
      <template v-else>
        <div class="index">{{ warnLine.index }}</div>
        <div :class="warnLine.type" class="title">{{ warnLine.title }}</div>
        <div class="content">
          <div v-for="item in warnLine.items" :key="item.key" class="items">
            <div class="name">{{ item.title }}</div>
            <div class="itemType">
              <div v-if="item.type === 'number'" class="number">
                <!--            <a-input v-model:value="props.datas[item.key]" :placeholder="item.placeholder || '请输入'"/>-->
                <a-input-number v-model:value="carData[item.key]" :min="1" class="numberInput"/>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>


<script setup>
import {inject} from "@vue/runtime-core";

const props = defineProps({
  column: {
    type: Array,
    default: []
  },
});

const carData = inject("carData");
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
